<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>评论列表</span>
            </div>
        </template>
        <el-table :data="datas">
            <el-table-column width="40" label="#" prop="id" />
            <el-table-column width="400" label="文章标题" prop="article_title" />
            <el-table-column width="60" label="用户" prop="user_nickname" />
            <el-table-column label="留言内容" prop="content" />
            <el-table-column width="140" label="留言日期" prop="create_time" />
            <el-table-column label="回复内容" prop="reply" />
            <el-table-column width="140" label="回复日期" prop="reply_time" />
            <el-table-column width="160" label="操作">
                <template #default="scope">
                    <el-button @click="replyText(scope.$index)" size="small" type="primary" plain>
                        <el-icon>
                            <EditPen />
                        </el-icon>回复
                    </el-button>
                    <el-button size="small" type="danger" plain>
                        <el-icon>
                            <Delete />
                        </el-icon>隐藏
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <!-- 回复评论 -->
    <el-dialog v-model="dialogTableVisible" title="" align-center :data="form">
        <el-descriptions title="回复评论" direction="vertical" :column="2" border>
            <el-descriptions-item label="评论用户">{{form.user_nickname}}</el-descriptions-item>
            <el-descriptions-item label="评论文章">{{form.article_title}}</el-descriptions-item>
            <el-descriptions-item label="评论内容" :span="3">{{form.content}}</el-descriptions-item>
        </el-descriptions>
        <el-input v-model="form.reply" :rows="4" type="textarea" />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogTableVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSave(form.reply)">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref } from 'vue';
import comment from '@/api/comment';

let datas = ref([]);
let form = ref();
async function loadList() {
    let { status, msg, data } = await comment.list();
    if (status) {
        datas.value = data;
    } else {
        ElMessage(msg);
    }
}
loadList();
let index = ref();
let dialogTableVisible = ref(false);
let replyText = (i) => {
    index.value = datas.value[i].id;
    dialogTableVisible.value = true;
    form.value = datas.value[i];
}
let handleSave = async (reply) => {
    dialogTableVisible.value = false;
    let { status, msg } = await comment.reply({ id: index.value ,reply});
    loadList();
}
</script>
    
<style lang="less">
.el-table {
    font-size: 12px;
}
</style>